<template>
  <div>

    <div style="margin: 20px 0">
      <RouterLink to="/test">
          跳转到test.vue
      </RouterLink>
    </div>

    <div style="margin: 20px 0" >
      <el-button type="primary" @click="router.push('/test')">
          跳跳乐
      </el-button>
    </div>

    <div style="margin: 20px 0">
      <RouterLink to="/">
        跳转到Home.vue
      </RouterLink>
    </div>

    <div>
      <el-input v-model="data.input" style="width: 240px" placeholder="Please input" clearable :prefix-icon="Search"/>
      <el-input suffix-icon="Calendar" style="width: 200px ">Search</el-input>
      <el-input v-model="data.descr" style="width: 240px" placeholder="我是码农" clearable :prefix-icon="Search" type="textarea"/>
    </div>

    <div style="margin: 20px 0">

      <el-select
          multiple
          v-model="data.value"
          placeholder="Select"
          size="default"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>{{data.value}}

    </div>

    <div>
      <el-radio-group v-model="data.radio1">
        <el-radio value="Value 1">Option 1</el-radio>
        <el-radio value="Value 2">Option 2</el-radio>
      </el-radio-group>
    </div>

    <div>
      <el-radio-group v-model="data.radio2" size="large">
        <el-radio-button label="New York" value="1" />
        <el-radio-button label="Washington" value="2" />
        <el-radio-button label="Los Angeles" value="3" />
        <el-radio-button label="Chicago" value="4" />
      </el-radio-group>
    </div>

  </div>
</template>

<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import router from "@/router/index.js";

const data = reactive({
  input:null
  ,descr:null
  ,options:['苹果', '香蕉', '梨子']
  ,value:''
  ,radio1:''
  ,radio2:'2'
})
</script>
